<template>
  <div>
      <top-bar></top-bar>
      <left-bar :datas='data'></left-bar>
      <div class="system">
           <home-bar :currentPage='currentPage'></home-bar>
             <div class="system-main">
                 <div class="main-position">
                     首页  >   系统设置  >   安全设置
                     <a href="javascript:void(0);"><i class="el-icon-refresh"></i></a>
                 </div>
                 <div class="main-height"></div>
                 <div class="main-mains">
                    <div class="main-top-nav">
                         <ul>
                            <router-link to="/system" @click.native="addPath('/system','系统设置')">
                                <li>商户资料</li>
                            </router-link>
                            <router-link to="/systemSafe" @click.native="addPath('/systemSafe','系统设置')">
                                <li class="active">安全设置</li>
                            </router-link>
                            <router-link to="/systemStockAlert" @click.native="addPath('/systemStockAlert','系统设置')">
                                <li>库存预警设置</li>
                            </router-link>
                           <router-link  to="/recommend" @click.native="addPath('/recommend','系统设置')">
                                <li>我要推荐</li> 
                            </router-link>
                            <router-link to="/recommends" @click.native="addPath('/recommends','系统设置')">
                                <li>推荐管理</li>
                            </router-link>
                            <router-link to="/about" @click.native="addPath('/about','系统设置')">
                                <li>关于我们</li>
                            </router-link>
                        </ul>
                    </div>
                    <div class="system-main-safe">
                        <div class="system-main-safe-top clear">
                            <div class="fl">安全级别：</div>
                            <el-progress :percentage="50" status="exception" color='#009ea3' class="fl system-main-safe-w"></el-progress>
                            <div class="fl system-main-safe-t">
                                <span>较高</span>
                                建议您启动全部安全设置，以保障账户及资金安全。
                            </div>
                        </div>
                        <div class="system-main-safe-list clear">
                            <div class="system-main-safe-list1 fl">
                                <img src="../images/system-main-safe-list1.png" alt="">
                            </div>
                            <div class="system-main-safe-list2 fl">
                                账户
                            </div>
                            <div class="system-main-safe-list3 system-main-safe-color2 fl">
                                15078346158
                            </div>
                        </div>
                        <div class="system-main-safe-list clear">
                            <div class="system-main-safe-list1 fl">
                                <img src="../images/system-main-safe-list1.png" alt="">
                            </div>
                            <div class="system-main-safe-list2 fl">
                                登录密码
                            </div>
                            <div class="system-main-safe-list3 fl">
                                <span class="system-main-safe-color1">互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。</span>
                                
                            </div>
                            <div class="system-main-safe-list4 fl">
                                <span @click="systemChange2(1)">修改</span>
                            </div>
                        </div>
                        <div class="system-main-safe-list clear">
                            <div class="system-main-safe-list1 fl">
                                <img src="../images/system-main-safe-list1.png" alt="">
                            </div>
                            <div class="system-main-safe-list2 fl">
                                绑定手机
                            </div>
                            <div class="system-main-safe-list3 fl">
                                您验证的手机： <em>155*****356 </em>若已丢失或停用，请立即更换，<span class="system-main-safe-color1">避免账户被盗。</span>
                            </div>
                            <div class="system-main-safe-list4 fl">
                                <span @click="systemChange1(1)">修改</span>
                            </div>
                        </div>
                        <div class="system-main-safe-list clear">
                            <div class="system-main-safe-list1 fl">
                                <img src="../images/system-main-safe-list1.png" alt="">
                            </div>
                            <div class="system-main-safe-list2 fl">
                                绑定邮箱
                            </div>
                            <div class="system-main-safe-list3 fl">
                                验证后，可用于快速找回登录密码，接收账户余额变动提醒。
                            </div>
                            <div class="system-main-safe-list4 fl">
                                <span @click="systemChange1(2)">修改</span>
                            </div>
                        </div>
                        <div class="system-main-safe-list clear">
                            <div class="system-main-safe-list1 fl">
                                <img src="../images/system-main-safe-list1.png" alt="">
                            </div>
                            <div class="system-main-safe-list2 fl">
                                支付密码
                            </div>
                            <div class="system-main-safe-list3 fl">
                                建议您定期更换新的支付密码，提高安全性。
                            </div>
                            <div class="system-main-safe-list4 fl">
                                <span @click="systemChange2(2)">修改</span>
                            </div>
                        </div>
                        <div class="system-main-safe-list clear">
                            <div class="system-main-safe-list1 fl">
                                <img src="../images/system-main-safe-list2.png" alt="">
                            </div>
                            <div class="system-main-safe-list2 fl">
                                锁死账号
                            </div>
                            <div class="system-main-safe-list3 fl">
                                <span class="system-main-safe-color1">输入密码错误10次锁死账户。</span>
                            </div>
                            <div class="system-main-safe-list4 fl">
                                <el-switch
                                    v-model="valueSwitch"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">
                                </el-switch>
                            </div>
                        </div>
                    </div>
                 </div>
             </div>
            <div class="system-menban" v-if="showMessagebox1 || showMessagebox2">
            </div>
            <div class="system-messagebox1" v-if="showMessagebox1">
                <div class="system-messagebox1-top clear">
                    <span>{{showMessageboxText1}}</span>
                    <i  @click='systemClick(1)'    class="el-icon-close system-icon  fr"></i>
                </div>
                <div class="system-messagebox1-con">
                    <div class="clear">
                        <div class="fl system-messagebox1-t" >{{showMessageboxText2}}</div>
                        <div class="fl ">
                            <el-input
                                class="system-messagebox1-input1"
                                v-model="systemPhone"
                                clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="system-messagebox1-texts">错误提示！</div>
                    <div class="clear">
                        <div class="fl system-messagebox1-t" >验证码</div>
                        <div class="fl ">
                            <el-input
                                class="system-messagebox1-input2"
                                v-model="systemCode"
                                clearable>
                            </el-input>
                        </div>
                        <div class="fl system-messagebox1-code">
                            获取验证码
                        </div>
                    </div>
                    <div class="system-messagebox1-texts">错误提示！</div>
                     <div class="clear">
                        <div class="fl system-messagebox1-t" ></div>
                        <div class="fl system-messagebox1-btn">
                            <div class="fl">提交</div>
                            <div class="fl" @click='systemClick(1)' >取消</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="system-messagebox1 system-messagebox2" v-if="showMessagebox2">
                <div class="system-messagebox1-top clear">
                    <span>{{showMessageboxText3}}</span>
                    <i  @click='systemClick(2)'    class="el-icon-close system-icon  fr"></i>
                </div>
                <div class="system-messagebox1-con">
                    <div class="clear">
                        <div class="fl system-messagebox1-t" >旧密码</div>
                        <div class="fl ">
                            <el-input
                                class="system-messagebox1-input1" type="password"
                                v-model="systemOldPword" 
                                clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="system-messagebox1-texts">错误提示！</div>
                    <div class="clear">
                        <div class="fl system-messagebox1-t" >新密码</div>
                        <div class="fl ">
                            <el-input
                                class="system-messagebox1-input1" type="password"
                                v-model="systemNewPword"
                                clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="system-messagebox1-texts">错误提示！</div>
                     <div class="clear">
                        <div class="fl system-messagebox1-t" >确认密码</div>
                        <div class="fl ">
                            <el-input
                                class="system-messagebox1-input1" type="password"
                                v-model="systemNewPwords"
                                clearable>
                            </el-input>
                        </div>
                    </div>
                       <div class="system-messagebox1-texts">错误提示！</div>    
                     <div class="clear">
                        <div class="fl system-messagebox1-t" ></div>
                        <div class="fl system-messagebox1-btn">
                            <div class="fl">提交</div>
                            <div class="fl" @click='systemClick(2)' >取消</div>
                            <div class="fl system-messagebox1-forget"  @click="systemForget()" >忘记旧密码?</div>
                        </div>
                    </div>
                </div>
            </div>
       </div>
  </div>
</template>

<script>
import topBar from "../public/top";
import leftBar from "../public/left";
import homeBar from "../public/homebar";

export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "/system",
      currentPage: { path: "/systemSafe", name: "系统设置" },
      systemPhone: "", // 电话号码和邮箱
      systemCode: "", // 验证码
      valueSwitch: false,
      systemOldPword: "", //旧密码
      systemNewPword: "", //新密码
      systemNewPwords: "", //确认新密码
      showMessagebox1: 0,
      showMessagebox2: 0,
      showMessageboxText1: "",
      showMessageboxText2: "",
      showMessageboxText3: ""
    };
  },
  methods: {
    systemChange1(e) {
      this.systemPhone = "";
      if (e == 1) {
        //修改绑定手机
        this.showMessagebox1 = 1;
        this.showMessageboxText1 = "手机验证";
        this.showMessageboxText2 = "手机号码";
      } else if (e == 2) {
        this.showMessagebox1 = 1;
        this.showMessageboxText1 = "邮箱验证";
        this.showMessageboxText2 = "邮箱";
      }
    },
    systemClick(e) {
      if (e == 1) {
        //关闭修改手机 和 邮箱的弹窗
        this.showMessagebox1 = 0;
      } else {
        // 关闭修改密码的弹窗
        this.showMessagebox2 = 0;
      }
    },
    systemChange2(e) {
      this.systemOldPword = "";
      this.systemNewPword = "";
      this.systemNewPwords = "";
      if (e == 1) {
        //修改登录密码
        this.showMessagebox2 = 1;
        this.showMessageboxText3 = "修改登录密码";
      } else {
        this.showMessagebox2 = 1;
        this.showMessageboxText3 = "修改支付密码";
      }
    },
    systemForget() {
      //找回密码
    },
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    }
  }
};
</script>

<style lang="less" scoped>
@import "system.less";
</style>


